import React from "react";
import { Carousel, WingBlank } from "antd-mobile";

export default class Swiper extends React.Component {
  /*   state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
  }
 */
  constructor(props) {
    super(props);
    this.state = {
      data: ["1", "2", "3"],
      imgHeight: 100,
    };
  }
 /*  static getDerivedStateFromProps(props, state) {
    console.log(props);
    console.log(state);
    return {
      data25: props.value,
    };
  } */

  componentDidMount() {
    // simulate img loading
    // let result = this.props.data.result.
    console.log(this.props);
    /*  setTimeout(() => {
      this.setState({
        data: [
          "AiyWuByWklrrUDlFignR",
          "TekJlZRVCjLFexlOCuWn",
          "IJOtIlfsYdTyaDTRVrLI",
        ],
      });
    }, 100); */
  }
  render() {
  
    let swiperData = this.props.value;
    return (
      <WingBlank>
        <Carousel
          className="space-carousel"
          frameOverflow="visible"
          // cellSpacing={0.3}
          slideWidth={0.9}
          autoplay={false}
          beforeChange={(from, to) =>
            console.log(`slide from ${from} to ${to}`)
          }
          afterChange={(index) => this.setState({ slideIndex: index })}
        >
          {swiperData.map((val, index) => (
            <a
              key={val}
              href="##"
              style={{
                display: "block",
                position: "relative",
                top: this.state.slideIndex === index ? -6 : 0,
                height: this.state.imgHeight,
                // boxShadow: "2px 1px 1px rgba(0, 0, 0, 0.2)",
              }}
            >
              <img
                src={val.image_src}
                alt=""
                style={{ width: "96%", verticalAlign: "top" }}
                onLoad={() => {
                  // fire window resize event to change height
                  window.dispatchEvent(new Event("resize"));
                  this.setState({ imgHeight: "200px" });
                }}
              />
            </a>
          ))}
        </Carousel>
      </WingBlank>
    );
  }
}
